<template>
	<van-tabbar class="tabbar" v-model="active">
		<van-tabbar-item v-for="(item,index) in tabbars" :key="index" :to="(item.path)">
			<span>{{item.title}}</span>
			<img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
		</van-tabbar-item>
	</van-tabbar>
</template>

<script>
export default {
	name: "tabbar",
	data() {
		return {
			active: 0,
			tabbars: [
				{
					path: "/",
					title: "推荐",
					normal: require("@/assets/img/tabs/tabs-home.svg"),
					active: require("@/assets/img/tabs/tabs-home-active.svg")
				},
				{
					path: "/library",
					title: "书库",
					normal: require("@/assets/img/tabs/tabs-lib.svg"),
					active: require("@/assets/img/tabs/tabs-lib-active.svg")
				},
				{
					path: "/ranking",
					title: "排行",
					normal: require("@/assets/img/tabs/tabs-rank.svg"),
					active: require("@/assets/img/tabs/tabs-rank-active.svg")
				},
				{
					path: "/ucenter",
					title: "我的",
					normal: require("@/assets/img/tabs/tabs-user.svg"),
					active: require("@/assets/img/tabs/tabs-user-active.svg")
				}
			]
		};
	},
	methods: {},
	//通过路由跳转判断选中的样式
	created() {
		if (this.$route.path == "index") {
			this.active = 0;
		} else if (this.$route.path == "/library") {
			this.active = 1;
		} else if (this.$route.path == "/ranking") {
			this.active = 2;
		} else if (this.$route.path == "/ucenter") {
			this.active = 3;
		}
	}
};
</script>

<style>
.van-tabbar-item__icon {
	margin-bottom: 2px;
}
.van-tabbar-item__icon img {
	height: 22px;
}
</style>